<template>
    <el-dialog @open="openDialog" v-model="dialogForms" title="新增资产档案" @close="closeDia()" width="650">
        <el-form ref="formRef" :inline="true" :model="form" :label-position="labelPosition" label-width="90">
            <el-form-item label="资产编号:" prop="name">
                <el-input v-model="form.name" clearable maxlength="10" />
            </el-form-item>
            <el-form-item label="资产名称:" :rules="{
                required: true,
            }">
                <el-input v-model="form.name" clearable maxlength="10" />
            </el-form-item>
            <el-form-item label="资产位置:" :rules="{
                required: true,
            }">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="所属部门:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="资产类型:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="使用情况:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="型号:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="制造商:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="使用人:" :rules="{
                required: true,
            }">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="联系电话:" :rules="{
                required: true,
            }">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="购买时间:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="购买价格:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="购买地点:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="支付方式:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="维修人员:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="联系电话:">
                <el-input v-model="form.name" clearable />
            </el-form-item>
            <el-form-item label="使用手册:" prop="file">
                <el-upload ref="upload" :on-change="handleChange" class="upload-demo w-[180px]" action="#" :limit="1"
                    :on-exceed="handleExceed" :auto-upload="false">
                    <template #trigger>
                        <el-button type="primary" link>上传</el-button>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="购买合同:">
                <el-upload ref="upload" class="upload-demo w-[180px]" action="#" :limit="1" :on-exceed="handleExceed"
                    :auto-upload="false">
                    <template #trigger>
                        <el-button type="primary" link>上传</el-button>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="报修书:">
                <el-upload ref="upload" class="upload-demo w-[180px]" action="#" :limit="1" :on-exceed="handleExceed"
                    :auto-upload="false">
                    <template #trigger>
                        <el-button type="primary" link>上传</el-button>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="diaCancle()">取消</el-button>
                <el-button type="primary" @click="diaConfirm()">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, defineProps, onUnmounted, watch } from 'vue';
import type { FormInstance, FormProps, UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus';
import { genFileId } from 'element-plus';
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}


const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
    form.file = uploadFile.raw
}

const labelPosition = ref<FormProps['labelPosition']>('right')
//弹出框
const dialogForms = ref(false)
defineExpose({
    dialogForms,
});
const form: any = ref({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
    file: ''
})
const diaCancle = () => {
    dialogForms.value = false
}
const diaConfirm = () => {
    //上传文件
    const e = new FormData()
    console.log(form, 456);
}

const formRef = ref()
const closeDia = () => {
    if (!formRef.value) return
    formRef.value.resetFields()
    dialogForms.value = false
}
const props = defineProps({
    dataProps: {
        type: Object
    }
});
const openDialog = () => {
    form.value = props.dataProps
    console.log(props.dataProps, 778999, form);

}
</script>
<style ></style>